<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Guido Tapia - JQuery Table Filter Demo</title>
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>    	
	<!-- Production (small) -->
    <script type="text/javascript" src="scripts-pack.js"></script>    	    
	
	<!-- Debug (source)
	<script type="text/javascript" src="jquery.cookie.js"></script>    	
    <script type="text/javascript" src="picnet.jquery.tablefilter.js"></script>	
	-->
	
    <script type="text/javascript">
        $(document).ready(function() {
            //  Randomly Create Data Rows
            for (var i = 0; i < 50; i++) {
                var tr = $("<tr>" +
					"<td>Value" + Math.floor(Math.random() * 500) + "</td>" + 
					"<td>" + Math.floor(Math.random() * 500) + " </td>" + 
					"<td>" + (Math.random() > 0.5 ? "yes" : "no") + "</td>" + 
					"<td>" + (Math.random() <= 0.333 ? "Item 1" : Math.random() > 0.5 ? "Item 2" : "Item 3") + "</td>" + 
					"<td></td>" +
					"<td>" + parseInt(10 + Math.random() * 18) + "/" + parseInt(10 + Math.random() * 2) + "/2009</td>" + 					
					"<td></td>" +
					"</tr>");
                $('#demotable1 tbody').append(tr);
            }
			
			for (var i = 0; i < 50; i++) {
                var tr = $("<tr><td>Value(2) " + Math.floor(Math.random() * 500) + "</td></tr>");
                $('#demotable2 tbody').append(tr);
            }

            // Initialise Plugin
            var options1 = {
                additionalFilterTriggers: [$('#onlyyes'), $('#onlyno'), $('#quickfind')],
                clearFiltersControls: [$('#cleanfilters')],
                matchingRow: function(state, tr, textTokens) {
                    if (!state || !state.id) { return true; }					
					var val =  tr.children('td:eq(2)').text();
					switch (state.id) {
						case 'onlyyes': return state.value !== 'true' || val === 'yes';
						case 'onlyno': return state.value !== 'true' || val === 'no';
						default: return true;
					}
                }
            };

            $('#demotable1').tableFilter(options1);
			
			var grid2 = $('#demotable2');
			var options2 = {                
                filteringRows: function(filterStates) {										
					grid2.addClass('filtering');
                },
				filteredRows: function(filterStates) {      															
					grid2.removeClass('filtering');					
					setRowCountOnGrid2();
                }
            };			
			function setRowCountOnGrid2() {
				var rowcount = grid2.find('tbody tr:not(:hidden)').length;
				$('#rowcount').text('(Rows ' + rowcount + ')');										
			}
			
			grid2.tableFilter(options2); // No additional filters			
			setRowCountOnGrid2();
        });
    </script>
<style>
* {	font-family:arial;	font-size:8pt;}
table, td, th {	border: solid 1px silver; }
th { background-color:silver; }
a {	color:gray; }
.filtering { background-color:light-gray;}
</style>
</head>
<body>    
	<b>Additional Filters for Table 1</b><br/>
    Only Show Yes: <input type="checkbox" id="onlyyes"/>        	
	Only Show No: <input type="checkbox" id="onlyno"/>
	<br/>    
	Quick Find: <input type="text" id="quickfind"/>
	<br/>
	<a id="cleanfilters" href="#">Clear Filters</a>
	<br/><b>Table 1</b><br/>
    <table id='demotable1'>
        <thead>
            <tr><th>Text Column 1</th><th>Number Column</th><th>Yes/No Column</th><th filter-type='ddl'>List Column</th><th style='width:100px;' filter='false'>No Filter</th><th>Date Column</th><th filter='false'>Empty</th></tr>
        </thead>
        <tbody>
        </tbody>
    </table>
	<br/><br/><b>Table 2 <span id='rowcount'></span></b><br/>
	<table id='demotable2'>
        <thead>
            <tr><th>Text Column 2</th></tr>
        </thead>
        <tbody>
        </tbody>
    </table>
	<hr/>
	This plugin was developed by <a href='mailto:guido.tapia@picnet.com.au'>Guido Tapia</a> Manager for the <a href='http://www.picnet.com.au/software_development.html'>custom software development</a> branch of <a href='http://www.picnet.com.au'>PicNet</a>.
</body>
</html>